<template>
<div class="loginContainer">
  <head-top :head-title="loginWay ? '登录' : '密码登录'" go-back="true"></head-top>
  <form class="loginForm">
    <section class="input_container">
      <input type="text" placeholder="账号" v-model.lazy="userAccount" />
    </section>
    <section class="input_container">
      <input v-if="!showPassword" type="password" placeholder="密码" v-model="password" />
      <input v-else type="text" placeholder="密码" v-model="password" />
      <van-switch v-model="showPassword" size="0.6rem" />
    </section>
    <section class="input_container">
      <input type="text" placeholder="验证码" maxlength="4" v-model="codeNumber" />
      <div class="img_change_img">
        <img v-show="captchaCodeImg" :src="captchaCodeImg" />
        <van-button round type="info" tag="div" size="mini" @click="getCaptchaCode" class="change_img">换一张</van-button>
      </div>
    </section>
  </form>
  <p class="login_tips">温馨提示：未注册过的账号，登录时将自动注册</p>
  <p class="login_tips">注册过的用户可凭账号密码登录</p>
  <van-button type="primary" size="small" class="login_container" round @click="mobileLogin">登陆</van-button>
</div>
</template>

<script>
import {
  mapMutations
} from "vuex";
import headTop from "@/components/header/head";
import {
  getcaptchas,
  accountLogin
} from "@/network/getData";
import {
  Switch,
  Button,
  Toast
} from "vant";
export default {
  name: "",
  data() {
    return {
      loginWay: false,
      userAccount: null,
      password: null,
      showPassword: false,
      codeNumber: null,
      captchaCodeImg: null,
      alertText: null,
    };
  },
  components: {
    [Switch.name]: Switch,
    [Button.name]: Button,
    headTop,
  },
  created() {},
  mounted() {
    this.getCaptchaCode();
  },
  methods: {
    ...mapMutations(["RECORD_USERINFO"]),
    async getCaptchaCode() {
      let res = await getcaptchas();
      this.captchaCodeImg = res.code;
    },
    async mobileLogin() {
      if (!this.userAccount) {
        this.alertText = "请输入用户名";
        // this.showAlert = true;
      } else if (!this.password) {
        // this.showAlert = true;
        this.alertText = "请输入密码";
      } else if (!this.codeNumber) {
        // this.showAlert = true;
        this.alertText = "请输入验证码";
      } else {
        this.alertText = null;
      }
      if (this.alertText !== null) {
        Toast.fail(this.alertText);
        return;
      }
      //用户名登录
      this.userInfo = await accountLogin(
        this.userAccount,
        this.password,
        this.codeNumber
      );
      if (!this.userInfo.user_id) {
        // this.showAlert = true;
        this.alertText = this.userInfo.message;
        Toast.fail(this.alertText);
        // if (!this.loginWay) this.getCaptchaCode();
      } else {
        this.RECORD_USERINFO(this.userInfo);
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin";

.loginForm {
  margin-top: 1.95rem;
  padding-top: 0.6rem;
}

.input_container {
  position: relative;

  margin-bottom: 0.041667rem;
  padding-left: 0.8rem;

  background-color: #fff;

  @include wh(100%, 2.070833rem);
}

input {
  font-size: 0.6rem;

  @include ct;

  @include wh(8.366667rem, 0.85rem);
}

.van-switch {
  right: 0.8rem;

  @include ct;
}

.img_change_img {
  height: 100%;

  img {
    right: 3rem;

    height: 80%;

    @include ct;
  }

  .change_img {
    right: 0.5rem;

    @include ct;
  }
}

.van-button__text {
  color: #fff;
}

.login_tips {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  font-size: 0.5rem;

  color: red;
}

.login_container {
  width: 100%;
  margin-top: 1rem;
}
</style>
